<template>
	<view>
		<!-- 头部 -->
		<uni-nav-bar fixed="true" statusBar="true">
			<template>
				<view class="title">购物车</view>
			</template>
			<template slot="left">
				<navigator open-type="navigateBack" hover-class="none">
					<uni-icons type="arrowleft" size="30"></uni-icons>
				</navigator>
				
			</template>
			<template slot="right">
				<view class="headeRight">
					编辑
				</view>
			</template>
		</uni-nav-bar>
		<view class="padding30">
			<view class="shopCarItemBox">
				<view class="flexjustify shopCarXuanze">
					<uni-icons class="shopCarxuanze" type="checkbox-filled" size="28" color="#1676FE"></uni-icons>
					<view class="flex">
						<view class="shopCarjianjia">-</view>
						<view class="shopCarNumber">1</view>
						<view class="shopCarjianjia">+</view>
					</view>
				</view>
				<view class="flex shopcarItem">
					<image src="/static/image/tj/boybanner1.png" mode="aspectFill" class="shopcarImg"></image>
					<view>
						<view class="shopCarTitle">春季外套韩版潮流帅气夹.. </view>
						<view class="kuanshoubanx">宽松版型 | 薄款 | 春季使用</view>
						<view class="shopCarPrice">
							<text class="shopPriceY">￥</text>
							<text>109.00</text>
						</view>
					</view>
				</view>
			</view>
			<view class="shopCarItemBox">
				<view class="flexjustify shopCarXuanze">
					<uni-icons class="shopCarxuanze" type="checkbox-filled" size="28" color="#1676FE"></uni-icons>
					<view class="flex">
						<view class="shopCarjianjia">-</view>
						<view class="shopCarNumber">1</view>
						<view class="shopCarjianjia">+</view>
					</view>
				</view>
				<view class="flex shopcarItem">
					<image src="/static/image/tj/boybanner1.png" mode="aspectFill" class="shopcarImg"></image>
					<view>
						<view class="shopCarTitle">春季外套韩版潮流帅气夹.. </view>
						<view class="kuanshoubanx">宽松版型 | 薄款 | 春季使用</view>
						<view class="shopCarPrice">
							<text class="shopPriceY">￥</text>
							<text>109.00</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flexjustify shopCarJiesuan">
			<view class="marginTop">
				<uni-icons class="shopCarxuanze" type="checkbox-filled" size="28" color="#1676FE"></uni-icons>
				<text class="shopCarQuanxuan">全选</text>
			</view>
			<view class="flex">
				<view class="shopCarHeji marginTop">
					合计：￥669元
				</view>
				<view class="shopCarjiesuanBtn" @click="open">结算</view>
			</view>
		</view>
		<uni-popup type="bottom" ref="popup1">
			<view class="shopCarPayBox padding30">
				<view class="flexjustify">
					<view class="fontsize30">请选择支付方式</view>
					<uni-icons size="23" type="closeempty"></uni-icons>
				</view>
				<view>
					<view class="flexjustify shopCarPayItem">
						<image src="/static/common/zhifubao.png" class="shopCarPayIcon" mode=""></image>
						<uni-icons type="circle" size="25"></uni-icons>
					</view>
					<view class="flexjustify shopCarPayItem">
						<image src="/static/common/weixinpay.png" class="shopCarPayIcon" mode=""></image>
						<uni-icons type="checkbox-filled" color="#1676FE" size="25"></uni-icons>
					</view>
				</view>
				<view class="shopCarPayBtn">
					立即支付
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			open:function(){
				this.$refs.popup1.open()
			},
		}
	}
</script>

<style>
	.title{
		text-align: center;
		width: 100%;
	}
.marginTop{
	margin-top: 40rpx;
}
.text{
	width: 100%;
	text-align: center;
}
page{
	padding-bottom: 130rpx;
}
.shopCarPayBtn{
	width: 100vw;
	height: 90rpx;
	background-color: #1676FE1676FE;
	color: #FFFFFF;
	margin-left: -30rpx;
	margin-right: -30rpx;
	margin-bottom: -30rpx;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	margin-top: 30rpx;
}
.shopCarPayItem{
	margin-top: 70rpx;
}
.shopCarPayIcon{
	width: 70rpx;
	height: 70rpx;
}
.shopCarPayBox{
	background-color: #fff;
}
.shopCarjiesuanBtn{
	width: 200rpx;
	text-align: center;
	background-color: #1676FE;
	color: #FFFFFF;
	height: 100rpx;
	line-height: 100rpx;
	margin-top: 15rpx;
	border-radius: 20rpx;
	letter-spacing: 3rpx;
}
.shopCarHeji{
	font-size: 32rpx;
	margin-right: 30rpx;
}
.shopCarQuanxuan{
	font-size: 32rpx;
	vertical-align: 10rpx;
	margin-left: 10rpx;
}
.shopCarJiesuan{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 130rpx;
	line-height: 130rpx;
	background-color: #fff;
	box-sizing: border-box;
	padding: 0 30rpx ;
}
.shopCarItemBox{
	margin: 30rpx 0;
}
.shopcarItem{
	margin-top: 20rpx;
}
.shopPriceY{
	font-size: 25rpx;
	font-weight: normal;
}
.shopCarPrice{
	color:#ED1777 ;
	font-weight: bold;
}
.kuanshoubanx{
	font-size: 25rpx;
	margin: 10rpx 0;
}
.shopCarTitle{
	margin-top: 10rpx;
	font-size: 30rpx;
	width: 430rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.shopcarImg{
	width: 170rpx;
	height:200rpx ;
	margin-right: 20rpx;
}
.shopNumber{
	width: 150rpx;
	height: 50rpx;
}
.shopCarjianjia{
	width: 40rpx;
	height:40rpx;
	text-align: center;
	border: 1px solid #BFBFBF;
	line-height: 40rpx;
	border-radius: 10rpx;
}
.shopCarNumber{
	margin: 0 20rpx;
	font-size: 28rpx;
	line-height: 50rpx;
}
.shopCarXuanze{
	border-bottom: 1px solid #CCCCCC;
}
.shopCarxuanze{
	margin-bottom: 20rpx;
}
</style>
